<template>
  <view v-if="show" class="invite-wrap-container">
    <view class="invite-container">
      <image class="bg" src="http://down.qwdata.vip/app%2Fxcx%2Ftanchuang%403x.png"></image>
<!--      <image class="bg" src="http://down.qwdata.vip/app_icon/1695570601644"></image>-->
      <image :src="avatar ? avatar : 'http://down.qwdata.vip/app_icon/1672758529606'"
             style="width: 50upx;height: 50upx;position: absolute;left: 40upx;top:65upx;border-radius: 25upx"></image>
      <view class="btn-container">
        <view class="btn" @click="enter">立即领取
        </view>
      </view>
      <view class="close" @click="close">
        <image src="../static/guanbi@3x.png" class="icon"></image>
      </view>

    </view>
  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import {commonApi} from '@/api'

export default {
  name: "InviterDialog",
  data() {
    return {
      avatar: null,
      show: false,
    };
  },
  computed: {
    ...mapGetters(['mine', 'query'])
  },
  methods: {
    enter() {
      this.close()
      setTimeout(() => {
        this.$emit('enter')
      }, 150)

    },
    openInvite() {
      if (this.query.inviter) {
        commonApi.getAvatar(this.query.inviter).then(res => {
          this.avatar = res.data.data.avatar;
          this.open()
        })
      }
    },
    open(avatarUrl) {
      this.avatar = avatarUrl;
      this.show = true
    },
    close() {
      uni.showTabBar();
      this.show = false
    },
  }
}
</script>

<style lang="scss">
@keyframes coupon-show {
  0% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes coupon-doing {
  0% {
    width: 270upx;
    height: 80upx;
    font-size: 15px;
  }
  6% {
    font-size: 17px;
    width: 300upx;
    height: 90upx;
  }
  12% {
    width: 270upx;
    height: 80upx;
    font-size: 15px;
  }
  18% {
    font-size: 17px;
    width: 300upx;
    height: 90upx;
  }
  24% {
    width: 270upx;
    height: 80upx;
    font-size: 15px;
  }
}

.invite-wrap-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0005;
}
.invite-container {
  width: 536upx;
  height: 652upx;
  position: relative;
  animation: coupon-show 300ms;

  .bg {
    width: 536upx;
    height: 652upx;
  }

  .btn-container {
    position: absolute;
    bottom: 40upx;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    right: 0;
  }

  .btn {
    background-color: #FFE7BBFF;
    height: 80upx;
    width: 270upx;
    border-radius: 80upx;
    color: #171b1d;
    font-weight: 500;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: coupon-doing 2000ms 500ms infinite;
  }

  .close {
    background-color: #fff;
    width: 48upx;
    height: 48upx;
    border-radius: 25upx;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -20upx;
    right: -20upx;

    .icon {
      width: 24upx;
      height: 24upx;
    }
  }
}
</style>
